import React, { useContext } from "react";
import Item1 from './Item1';
import Item2 from './Item2';
import { NumWrapper, MyContext } from "./MyContext";


function Box() {
    const { setNum } = useContext(MyContext);
    // 触发
    const increment = () => {
        setNum(num => num + 1);
    }
    const decrement = () => {
        setNum(num => num - 1)
    }
    return (
        <div className='wrapper wrapper2'>
            <h2 className='display-4'>非侵入式使用useContext</h2>
            <button onClick={increment} className='btn btn-danger'>父组件增加</button>
            <button onClick={decrement} className='ml-3 btn btn-warning'>父组件减少</button>
            <Item1 />
            <Item2 />
        </div>
    )
}

const WrapperBox = () => <NumWrapper><Box /></NumWrapper>

export default WrapperBox;